<template>
	<tm-fullView>
		<tm-menubars title="tm-images" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">自动设定宽高,点图片可预览</view>
			<tm-images  @load="loadimg" src="https://picsum.photos/300?id=7"></tm-images>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">禁止点击图片预览,带有圆角属性</view>
			<view class="flex">
				<tm-images :width="200" :height="200" :round="4" :previmage="false" src="https://picsum.photos/300?id=2 "></tm-images>
				<tm-images :width="200" :height="200" :round="4" src="https://picsum.photos9/300?id=9 ">
					<template v-slot:error>
						<text class="text-red text-size-s text-grey-lighten-1">自定加载出错</text>
					</template>
				</tm-images>
			</view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">手动设定宽,高度自动</view>
			<view class="d-inline-block pr-24">
				<tm-images :width="150" src="https://picsum.photos/300/200?id=4 "></tm-images>
			</view>
			<view class="d-inline-block">
				<tm-images :width="150" src="https://picsum.photos/300/500?id=12 "></tm-images>
			</view>
			
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">强制设定宽高</view>
			<view class="d-inline-block">
				<tm-images :width="150" :height="50" src="https://picsum.photos/300/200?id=33 "></tm-images>
			</view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">缩放模式</view>
			<view class="d-inline-block pr-24">
				<tm-images model="heightFix" :width="250" :height="100" src="https://picsum.photos/300/200?id=67 "></tm-images>
			</view>
			<view class="d-inline-block">
				<tm-images model="widthFix" :width="250" :height="100" src="https://picsum.photos/300/200?id=67 "></tm-images>
			</view>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmImages},
		data() {
			return {
				
			}
		},
		methods: {
			loadimg(imginfo){
			}
		}
	}
</script>

<style>

</style>
